class Base {
    constructor() {
        this.onBind()

    }
    //事件绑定函数
    onBind() {
        this.$('#text').addEventListener('input', this.onIin.bind(this))
        //失去焦点
        this.$('#text').addEventListener('blur', this.blurOn.bind(this))
        //获取焦点
        this.$('#text').addEventListener('focus', this.focusOn.bind(this))
    }
    //失去焦点搜索框
    blurOn() {
        this.$('.shuR').style.display = 'none'
    }
    //获取焦点
    focusOn() {
        this.$('.shuR').style.display = 'block'
    }
    //事件获取函数 
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res
    }
    //输入框输入事件 
    onIin() {
        let res = this.$('#text').value
        // console.log(res);
        this.jsonp(res)
    }
    //跨域操作
    jsonp(kw) {
        // console.log(kw);
        //创建一个新的script用来发送请求
        let script = document.createElement('script')
        //给script设置请求地址
        script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + kw + "&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
        this.$("body").after(script)
        script.remove();
    }
}
new Base;
function callback(data) {
    let ul = document.querySelector('.shuR')
    //console.log(data);
    //进行结构赋值
    let { s } = data
    //console.log(s);
    let html = '';
    s.forEach(ele => {
        html += `<li class='shuRu'>${ele}</li>`;
    });
    // 3-2 追加到ul中
    ul.innerHTML = html;
}